<template>
	<view class="container" :class="'theme-'+theme">
	<view class="addTitle">
      <view class="titleDetail">
        <view class="">
			<image src="../../static/newh5/fanhui.png" 
			class="yticon" 
			style="width: 13px;height: 20px;color:black" 
			@click="returnIndex()"
			></image>
        </view>
        <view class="titleText">
          <b>我的积分</b>
        </view>
        <view class=""  style="color: #269cd3">
        </view>
      </view>
    </view>
		<view class="integral-section">
			<view class="i-item" v-for="(item,index) in integralList" :key="index">
				<view class="name">{{item.typeName}}</view>
				<view class="info">
					<view>
						<view class="tit">积分余额：</view>
						<view class="balance">{{item.balance}}</view>
					</view>
					<view class="tit">{{item.scopeTxt}}可用</view>
					<text class="desc">积分描述：{{item.description===''?'暂无描述':item.description}}</text>
					<!-- 					<view style="margin-top: 10rpx;">
						<view class="blue-btn">收入明细</view>
						<view class="blue-btn">消费明细</view>
					</view> -->
				</view>
				<view @click="toProduct()" class="exchange">立即兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
	import {
		getIntegralList
	} from '../../api/order/order.js'
	export default {
		data() {
			return {
				integralList: [],
			};
		},
		onLoad() {
			this.getIntegral()
		},
		methods: {
			returnIndex() {
				goback()
			},
			getIntegral() {
				getIntegralList().then(res => {
					if (res.code === 0) {
						this.integralList = res.data
					}
				})
			},
			toProduct() {
				uni.navigateTo({
					url: '/pages/product/list'
				})
			},
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		background-color: #fff;
	}

	.integral-section {
		padding: 30rpx 30rpx;
		width: 100%;
		display: flex;
		height: 100%;
		border-top: 3px solid #f5f5f5;
		flex-direction: column;

		.i-item {
			width: 100%;
			border-radius: 8rpx;
			background-color: #eef0ff;
			margin-bottom: 16rpx;
			padding-left: 16rpx;
			padding-bottom: 16rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: row;

			.name {
				width: 67px;
				height: 68px;
				float: left;
				font-size: 14px;
				color: #fff;
				padding: 10rpx 10rpx 10rpx 20rpx;
				margin-right: 16rpx;
				text-align: center;
				background-size: 100%;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				background: url(../../static/blue-bg.png) no-repeat 100%;
			}

			.info {
				width: 50%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
			}

			.btn-group {
				float: right;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 13px;
				margin-top: 16rpx;
				height: 100%;
				margin: 16rpx;

				.btn {
					width: 80px;
					color: #5c6be8;
					padding: 8rpx 0 8rpx 0;
					border-radius: 10px;
					margin-bottom: 8rpx;
					border: 1px solid #5c6be8;
				}

				.go {
					width: 80px;
					padding: 8rpx 0 8rpx 0;
					color: #fff;
					border-radius: 10px;
					background: linear-gradient(270deg, #ffb60b, #ff890a);
				}
			}
		}
	}

	.tit {
		display: inline-block;
		font-size: 13px;
		color: #303133;
	}

	.desc {
		display: inline-block;
		font-size: 13px;
		color: #303133;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.balance {
		display: inline-block;
		color: $base-color;
		font-size: 16px;
		font-weight: bold;
	}

	.blue-btn {
		text-align: center;
		width: 80px;
		color: #5c6be8;
		margin-right: 8rpx;
		padding: 8rpx 0;
		border-radius: 10px;
		display: inline-block;
		margin-bottom: 8rpx;
		border: 1px solid #5c6be8;
		font-size: 13px;
	}

	.exchange {
		font-size: 13px;
		width: 80px;
		height: fit-content;
		text-align: center;
		margin: auto;
		padding: 8rpx 0 8rpx 0;
		color: #fff;
		border-radius: 10px;
		background: linear-gradient(270deg, #ffb60b, #ff890a);
	}

	/*多行文本溢出省略号*/
	.more-t {
		overflow: hidden; // 超出的文本隐藏
		text-overflow: ellipsis; // 溢出用省略号显示
		display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
		-webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
		-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
		transition: all linear 0.2s;
	}
</style>
